<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .container {
            position: relative;
            text-align: center;
            color: white;
        }

        .bottom-left {
            position: absolute;
            bottom: 8px;
            left: 16px;
        }

        .top-left {
            position: absolute;
            top: 8px;
            left: 16px;
        }

        .top-right {
            position: absolute;
            top: 8px;
            right: 16px;
        }

        .bottom-right {
            position: absolute;
            bottom: 8px;
            right: 16px;
        }

        *{
            font-size: 56px;
        }

        .centered {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>

<body>


    <p>How to place text over an image:</p>

    <div class="container">
        <img src="../img/Tesla (12).jpeg" alt="Snow" style="width:100%;">
        <div class="bottom-left">Bottom Left</div>
        <div class="top-left">Top Left</div>
        <div class="top-right">Top Right</div>
        <div class="bottom-right">Bottom Right</div>
        <div class="centered">Centered</div>
    </div>



    
    <xmp style="font-size: 22px; font-weight: bolder;  margin-bottom: 66px;  color: black;  font-family: '微软雅黑';">   
        
        必知必会 

        <div class="container">
            <img src="img/Tesla (12).jpeg" alt="Snow" style="width:100%;">
            <div class="bottom-left">Bottom Left</div>
            <div class="top-left">Top Left</div>
            <div class="top-right">Top Right</div>
            <div class="bottom-right">Bottom Right</div>
            <div class="centered">Centered</div>
        </div>

        .container {
            position: relative;
            text-align: center;
            color: white;
        }
        .bottom-left {
            position: absolute;
            bottom: 8px;
            left: 16px;
        }
        
        父容器 container 设置为 position: relative 
        子元素 用 position: absolute; 来定位
    </xmp>

</body>
</html>